<template>
  <div class="app-container" v-if="show">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
      label-width="68px"
    >
      <!-- <el-form-item label="统计月份" prop="monthly">
        
        <el-date-picker
          type="month"
          @change="changeTime"
          v-model="queryParams.monthly"
          placeholder="选择月"
        >
        </el-date-picker>
      </el-form-item> -->
      <el-form-item label="品牌" prop="brandName">
        <!-- <el-input
          v-model="queryParams.brand"
          placeholder="请输入品牌"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.brand"
          placeholder="选择品牌"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_pp"
            :key="dict.value"
            :label="dict.label"
            :value="dict.label"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplier">
        <!-- <el-input
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
        <el-select
          v-model="queryParams.supplier"
          placeholder="选择供应商"
          clearable
          filterable
        >
          <el-option
            v-for="dict in dict.type.sys_product_coder"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="产品款号" prop="spu">
        <!-- <el-input v-model="noticItem.value" placeholder="请输入颜色属性" /> -->
        <el-select
          v-model="queryParams.spu"
          clearable
          filterable
          remote
          :remote-method="getData"
          :loading="loading"
          placeholder="产品款号"
          @change="testAdd"
        >
          <el-option
            v-for="item in productNooptions"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="颜色" prop="colorProperty">
        <el-select
          ref="selectRef"
          v-model="queryParams.colorProperty"
          clearable
          filterable
          placeholder="颜色属性"
          style="width: 200px"
        >
          <el-option
            v-for="item in ColorLike"
            :key="item"
            :label="item"
            :value="item"
          >
          </el-option>
        </el-select>
        <!-- <el-input
          v-model="queryParams.colorProperty"
          placeholder="请输入颜色"
          clearable
          @keyup.enter.native="handleQuery"
        /> -->
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <!-- <el-form
      class="ry_form"
      v-show="showSearch"
      :inline="true"
      label-width="100px"
      :model="queryParams"
      ref="queryForm"
      size="medium"
    >
      <el-form-item label="类型" prop="panelType">
        <DictRadio
          v-model="queryParams.panelType"
          :radioData="dict.type.wms_inventory_panel_type"
          size="small"
          @change="handleQuery"
        ></DictRadio>
      </el-form-item>
      <el-form-item label="物料" prop="itemId">
        <item-select v-model="queryParams.itemId"></item-select>
      </el-form-item>
      <el-form-item label="仓库" prop="rackId">
        <wms-warehouse-cascader
          v-model="queryParams.place"
        ></wms-warehouse-cascader>
      </el-form-item>
      <el-form-item label="库存" prop="quantity">
        <number-range v-model="queryParams.quantityRange"></number-range>
      </el-form-item>
      <el-form-item class="flex_one tr">
        <el-button
          icon="el-icon-search"
          size="mini"
          type="primary"
          @click="handleQuery"
          >搜索</el-button
        >
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form> -->
    <el-row class="mb8" :gutter="10">
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          >导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-table
      :data="wmsInventoryList"
      @selection-change="handleSelectionChange"
      :height="550"
      border
      :header-cell-style="{ background: '#027db4', color: '#fff' }"
      @cell-click="goodstableEdit"
    >
      <el-table-column label="品牌" align="center" prop="brand" />

      <el-table-column label="供应商" align="center" prop="supplier" />
      <el-table-column label="skc" align="center" prop="skc" />
      <!-- <el-table-column label="item" align="center" prop="item" /> -->
      <el-table-column label="产品款号" align="center" prop="spu" />
      <el-table-column label="颜色" align="center" prop="colorProperty" />
      <el-table-column label="采购月份" align="center" prop="monthly" />
      <el-table-column label="采购单价" align="center" prop="purchasePrice" />

      <el-table-column
        label="采购订单量"
        align="center"
        prop="purchaseOrderCount"
      />
      <el-table-column
        label="采购总数量"
        align="center"
        prop="purchaseTotalCount"
      />
      <el-table-column
        label="关联采购单信息"
        align="center"
        prop="purchaseRelationInfo"
      >
        <template slot-scope="scope">
          <div
            style="
              color: rgb(37, 137, 255);
              cursor: pointer;
              text-decoration: underline;
            "
            @click="goto(scope.row)"
          >
            {{ scope.row.purchaseRelationInfo }}
          </div>
        </template>
      </el-table-column>
      <el-table-column label="备注" align="center" prop="remarks" />
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <section id="section" style="padding: 32px">
      <!-- <el-row style="font-size: 20px">
        <el-col :span="8"
          >产品款号:<el-input
            style="width: 300px"
            v-model="itemData.spu"
            :disabled="true"
          ></el-input
        ></el-col>
        <el-col :span="8"
          >颜色:<el-input
            style="width: 300px"
            v-model="itemData.colorProperty"
            :disabled="true"
          ></el-input
        ></el-col>
        <el-col :span="8"
          >此次采购单价为:{{
            itemData.purchasePrice ? itemData.purchasePrice : "未更新"
          }}</el-col
        >
      </el-row> -->
      <el-card>
        <div slot="header">
          <span
            style="
              line-height: 18px;
              color: rgba(0, 0, 0, 0.45);
              font-size: 14px;
              font-weight: bold;
              margin-right: 10px;
            "
            >供应商</span
          >

          <el-select
            v-model="supplierData"
            placeholder="选择供应商"
            clearable
            filterable
            multiple
            @change="testsupplier"
          >
            <el-option
              v-for="dict in supplierDataList"
              :key="dict"
              :label="dict"
              :value="dict"
            />
          </el-select>
          <el-button @click="testsupplier('bar')" size="mini" type="primary"
            >柱状图</el-button
          >
          <el-button @click="testsupplier('line')" size="mini" type="primary"
            >折线图</el-button
          >
          <!-- <span><i class="el-icon-collection"></i> 尺码分析</span> -->
        </div>
        <el-row :gutter="20" class="data_section" style="margin-bottom: 30px">
          <panel-group :itemData="itemData" />
        </el-row>
        <el-row
          style="background: #fff; padding: 32px 32px; margin-bottom: 32px"
        >
          <!-- <chartData :chart-data="echartDataI" @vchartData="vchartData" /> -->
          <div
            style="margin-left: 2px; margin-right: 2px; height: 460px"
            ref="echartDataShop"
          ></div>
        </el-row>
      </el-card>
    </section>

    <el-dialog
      title="关联采购单信息"
      :visible.sync="isOpen"
      width="80%"
      v-if="isOpen"
    >
      <el-row class="mb8" :gutter="10">
        <el-col :span="1.5">
          <el-button
            type="warning"
            plain
            icon="el-icon-download"
            size="mini"
            @click="handlePurchaseExport"
            >导出
          </el-button>
        </el-col>
        <!-- <right-toolbar
          :showSearch.sync="showSearch"
          @queryTable="getList"
        ></right-toolbar> -->
      </el-row>
      <MergeTable :tableData="PurchaseBasicsDwdList" />
      <!-- <el-table :data="PurchaseBasicsDwdList" :height="600">
        
        <el-table-column
          width="120"
          label="下单日期"
          align="center"
          prop="dataDate"
        >
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.dataDate, "{y}-{m}-{d}") }}</span>
          </template>
        </el-table-column>
        <el-table-column label="品牌" align="center" prop="brand" />
        <el-table-column label="供应商" align="center" prop="supplier" />
        <el-table-column
          width="120"
          label="合同号"
          align="center"
          prop="contractNumber"
        />

        <el-table-column label="货号" align="center" prop="spu" />
        <el-table-column label="颜色" align="center" prop="colorProperty" />
        <el-table-column
          label="采购单号"
          align="center"
          prop="purchaseOrderNumber"
        />
        <el-table-column label="新品/老品" align="center" prop="isNewProduct" />
        <el-table-column
          label="协议到货日期"
          align="center"
          prop="contractDeliveryDate"
          width="180"
        >
          <template slot-scope="scope">
            <span>{{
              parseTime(scope.row.contractDeliveryDate, "{y}-{m}-{d}")
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="已入库数量"
          align="center"
          prop="quantityReceived"
        />
        <el-table-column
          label="是否准交"
          align="center"
          prop="isOverdue30Days"
        />
        <el-table-column
          label="协议日期内已交货数量"
          align="center"
          prop="overdueQuantity30Days"
        />
        <el-table-column label="是否超入" align="center" prop="isOverOrder" />
        <el-table-column
          label="超入数量"
          align="center"
          prop="overOrderQuantity"
        />
        <el-table-column label="款式备注" align="center" prop="colorremark" />
        <el-table-column label="采购备注" align="center" prop="phaseremark" />
        <el-table-column label="下单数量" align="center" prop="orderQuantity" />
        <el-table-column
          label="合同采购价"
          align="center"
          prop="contractPurchasePrice"
        />
        <el-table-column
          label="合同采购金额"
          align="center"
          prop="contractAmount"
        />
        <el-table-column label="是否含税" align="center" prop="isTaxIncluded" />
        <el-table-column
          label="单件附加费用"
          align="center"
          prop="additionalCostPerUnit"
        />
        <el-table-column
          label="订单附加费用"
          align="center"
          prop="orderAdditionalCost"
        />
        <el-table-column
          label="附加费用说明"
          align="center"
          prop="additionalCostDescription"
        >
          <template slot-scope="scope">
            <el-popover trigger="hover" placement="bottom" width="300">
             
              <el-input
                v-model="scope.row.additionalCostDescription"
                :min-height="192"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 24 }"
                :style="{ width: '100%' }"
                :disabled="true"
              />
              <div slot="reference">
                <span class="textname">
                  {{ scope.row.additionalCostDescription }}
                </span>
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column
          label="成本裸价"
          align="center"
          prop="costPriceIncludingTax"
        />
        <el-table-column
          label="成本裸价"
          align="center"
          prop="costPriceExcludingTax"
        />
        <el-table-column
          label="单件税金"
          align="center"
          prop="taxAmountPerUnit"
        />
      </el-table> -->

      <pagination
        v-show="PurchaseBasicsDwdTotal > 0"
        :total="PurchaseBasicsDwdTotal"
        :page.sync="pageReq.pageNum"
        :limit.sync="pageReq.pageSize"
        @pagination="pageList"
      />
    </el-dialog>

    <el-dialog
      title="关联采购单信息"
      :visible.sync="isOpenDwd"
      width="80%"
      v-if="isOpenDwd"
    >
      <Dwd :query="this.form" />
    </el-dialog>
  </div>
</template>

<script>
import Dwd from "@/views/purchase/common/Dwd.vue";
import MergeTable from "@/views/purchase/common/MergeTable.vue";
import moment from "moment";
import {
  getPurchaseBasicsDwd,
  delPurchaseBasicsDwd,
  addPurchaseBasicsDwd,
  updatePurchaseBasicsDwd,
  synData,
  selectByPurchaseOrder,
  selectPurchaseMonth,
  selectPurchaseReturnVoList,
  selectPurchaseCost,
  selectPurchasePriceData,
  selectPurchasecostStatistics,
  selectSupplierBySkc,
} from "@/api/purchase/PurchaseBasicsDwd";
// import { listWmsInventory, exportWmsInventory } from "@/api/wms/inventory";
// import NumberRange from "@/components/NumberRange";
// import ItemSelect from "@/components/ItemSelect";
import PanelByItem from "@/views/purchase/inventory/component/PanelByItem.vue";
import PanelByItemType from "@/views/purchase/inventory/component/PanelByItemType.vue";
import PanelByWarehouse from "@/views/purchase/inventory/component/PanelByWarehouse.vue";
import PanelByArea from "@/views/purchase/inventory/component/PanelByArea.vue";
// import { isStarRepo } from "@/utils/is-star-plugin";
// import { mapGetters } from "vuex";
import { listBrandChannelShop, listAll } from "@/api/chart/brandChannelShop";
import {
  itemSaleData,
  skcByItemSaleList,
  queryContentByKey,
  selectItemStatistics,
  skuBySkcSaleList,
  comparisonStatistics,
} from "@/api/sku/sku";
import chartData from "./components/chartData";
import PanelGroup from "./components/PanelGroup";
import PanelGroupI from "./components/PanelGroupI";
import * as echarts from "echarts/lib/echarts.js";
import {
  listTemplate,
  getTemplate,
  delTemplate,
  addTemplate,
  updateTemplate,
  addTemplateAndSecondry,
  addProNoColorSize,
  productNoLike,
} from "@/api/product/template";
import {
  listSecondry,
  getSecondry,
  delSecondry,
  addSecondry,
  updateSecondry,
  getInfoByName,
  productNoColorLike,
  colorLike,
} from "@/api/product/secondry";
export default {
  name: "WmsInventory",
  dicts: [
    "sys_product_qudao",
    "sys_one_zero",
    "sys_product_size",
    "sys_sample_sf",
    "sys_jst_sample_sf",
    "sys_product_pp",
    "sys_product_coder",
  ],
  components: {
    PanelByArea,
    PanelByWarehouse,
    PanelByItemType,
    PanelByItem,
    // ItemSelect,
    // NumberRange,
    PanelGroup,
    PanelGroupI,
    chartData,
    MergeTable,
    Dwd,
  },
  // dicts: ["wms_inventory_panel_type"],
  data() {
    return {
      isOpenDwd: false,
      supplierDataList: [], //供应商列表
      productNooptions: [],
      ColorLike: [],
      //传递数据
      echartDataI: {
        columns: ["支付日期", "单价", "数量", "供应商"],
        rows: [],
      },

      spuData: {},
      supplierData: [],

      itemType: "skc",
      itemTypeList: [
        { value: "item", label: "item" },
        { value: "skc", label: "skc" },
      ],
      itemData: {},
      itemDataList: {},

      PurchaseBasicsDwdList: [],
      isOpen: false,
      //   queryParams.: "",
      rangeDate: [],
      show: true,
      // 遮罩层
      loading: true,
      // 导出遮罩层
      exportLoading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 库存表格数据
      wmsInventoryList: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        dataDate: null,
        brandName: null,
        supplier: null,
        contractNumber: null,
        sku: null,
        purchaseOrderNumber: null,
        isNewProduct: null,
        orderQuantity: null,
        contractPurchasePrice: null,
        contractAmount: null,
        isTaxIncluded: null,
        additionalCostPerUnit: null,
        orderAdditionalCost: null,
        additionalCostDescription: null,
        costPriceIncludingTax: null,
        costPriceExcludingTax: null,
        taxAmountPerUnit: null,
        contractDeliveryDate: null,
        quantityReceived: null,
        isOverdue30Days: null,
        overdueQuantity30Days: null,
        isOverOrder: null,
        overOrderQuantity: null,
        remarks: null,
        dataYear: null,
        dataMonth: null,
        startTime: null,
        endTime: null,
        contractType: "产品",
        monthly: "",
      },
      PurchaseBasicsDwdTotal: 0,
      pageReq: {
        pageNum: 1,
        pageSize: 10,
      },
      queryParamsPurchase: {},
      // 表单参数
      form: {},
      columns: [],
      panelType: 5,
    };
  },
  created() {
    // const res = await isStarRepo(
    //   "zccbbg",
    //   "RuoYi-Mall",
    //   this.userId,
    //   "http://wms.ichengle.top/inventory",
    //   "ruoyi-mall-商城",
    //   "https://gitee.com/zccbbg/RuoYi-Mall"
    // );
    // this.show = res;
    // if (res) {
    //   this.getList();
    // }
    this.getList();
    // let date = new Date(new Date() - 30 * 24 * 3600 * 1000);

    // this.queryParams.monthly = moment(date).format("YYYY.MM");
  },
  //   computed: {
  //     // ...mapGetters(["userId"]),
  //     currentComponent() {
  //       console.log(this.panelType);
  //       let type = parseInt(this.panelType);
  //       switch (type) {
  //         case 5:
  //           return "panel-by-warehouse";
  //         case 10:
  //           return "panel-by-area";
  //         case 20:
  //           return "panel-by-item-type";
  //         default:
  //           return "";
  //       }
  //     },
  //   },
  methods: {
    /* 获取货号列表 */
    getData(key) {
      console.log(JSON.stringify(key));
      this.loading = true;
      // return
      productNoLike(key).then((res) => {
        this.loading = false;
        this.productNooptions = res.data;
        // console.log(JSON.stringify(this.options));
      });
    },
    /* 获取颜色列表 */
    testAdd(key) {
      productNoColorLike({ productNo: key }).then((res) => {
        // this.loading = false;
        this.ColorLike = res.data;
        console.log(JSON.stringify(this.ColorLike));
      });
    },
    pageList() {
      const row = this.itemDataList;

      selectByPurchaseOrder({
        ...this.pageReq,
        // spu: row.item,
        // colorProperty: row.colorProperty,
        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseOrderList,
        skc: row.skc,
        // colorProperty: row.colorProperty,
      }).then((response) => {
        this.PurchaseBasicsDwdList = response;
        // this.PurchaseBasicsDwdTotal = response.total;
      });
    },
    async goto(row) {
      // console.log(JSON.stringify(row));
      // return;
      this.itemDataList = row;
      this.pageReq.pageNum = 1;
      this.queryParamsPurchase = {
        ...this.pageReq,

        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseOrderList,
        skc: row.skc,
        // colorProperty: row.colorProperty,
      };

      console.log(JSON.stringify(this.queryParamsPurchase));
      // this.$router.push({ path: '/product/secondry', query: { id: row.templateId } })
      await selectByPurchaseOrder({
        pageNum: 1,
        pageSize: 10,
        // purchaseRelationInfo: row.purchaseRelationInfo,
        purchaseOrderList: row.purchaseOrderList,
        skc: row.skc,
        // colorProperty: row.colorProperty,
        // purchaseOrderNumber: row.purchaseRelationInfo,
      }).then((response) => {
        this.PurchaseBasicsDwdList = response;
        // this.PurchaseBasicsDwdTotal = response.total;
      });
      this.isOpen = true;
    },
    //点击的时间
    vchartData(time) {
      console.log(time);
      this.form = {
        dataDate: time,
        sku: this.spuData.skc,
        pageNum: 1,
        pageSize: 10,
      };
      this.isOpenDwd = true;
    },
    changeTime() {
      this.queryParams.monthly = moment(this.queryParams.monthly).format(
        "YYYY.MM"
      );
      this.getList();
      console.log(JSON.stringify(this.queryParams.monthly));
    },
    handleChange() {
      this.queryParams.startTime = this.rangeDate[0];
      this.queryParams.endTime = this.rangeDate[1];
      this.getList();
    },
    // 打开加载层
    openLoading() {
      this.$modal.loading("正在加载，请稍候！");
    },
    /** 查询库存列表 */
    getList() {
      console.log(111);
      this.openLoading();
      selectPurchaseCost(this.queryParams).then((response) => {
        this.$modal.closeLoading();
        this.wmsInventoryList = response.rows ? response.rows : [];
        this.total = response.total;

        // if (response.rows.length > 0) {
        //   this.goodstableEdit(response.rows[0]);
        // }
      });
    },
    testsupplier(type) {
      let obj = {
        itemType: "skc",
        skc: this.spuData.skc,
        colorProperty: this.spuData.colorProperty,
        supplierList: this.supplierData,
        // monthly: row.monthly,
        // supplier: this.supplierData,
        // purchasePrice: row.purchasePrice,
        // spu: row.spu,
      };
      //总览
      this.getselectPurchasePriceData(obj);
      //趋势图
      this.getselectPurchasecostStatistics(obj, type);
    },
    //获取供应商列表
    getsupplierDataList(skc) {
      let obj = {
        skc: skc,
      };
      selectSupplierBySkc(obj).then((response) => {
        this.supplierDataList = response ? response : [];
      });
    },
    goodstableEdit(row, column, cell, event) {
      this.spuData = row;
      this.supplierData = [];
      this.supplierData.push(row.supplier);

      // if (!row.item || !row.colorProperty) {
      //   this.$modal.msgError("请选择有颜色的款式");
      //   return;
      // }
      //获取供应商列表
      this.getsupplierDataList(row.skc);
      // this.productNo = row.itemGrade;
      let obj = {};
      if (this.itemType == "item") {
        obj = {
          itemType: "item",
          item: row.item,
          // colorProperty: row.colorProperty,
          monthly: row.monthly,
          // purchasePrice: row.purchasePrice,
          supplier: this.queryParams.supplier,
          // spu: row.item,
        };
      } else if (this.itemType == "skc") {
        obj = {
          itemType: "skc",
          skc: row.skc,
          colorProperty: row.colorProperty,
          // monthly: row.monthly,
          supplierList: this.supplierData,
          // purchasePrice: row.purchasePrice,
          // spu: row.spu,
        };
      }

      //总览
      this.getselectPurchasePriceData(obj);
      //趋势图
      this.getselectPurchasecostStatistics(obj);
      // if (this.queryParams.itemType == "item") {
      //   this.getitemSaleData(obj);
      //   this.getskcData(obj);
      //   this.selectItemStatisticsEcharts(obj);
      // }
    },
    //趋势图
    getselectPurchasecostStatistics(obj, type) {
      selectPurchasecostStatistics(obj).then((response) => {
        // if (response.length <= 0) {
        //   return;
        // }
        if (response.length == 0) {
          var myChartDom = this.$refs.echartDataShop;

          // 检查是否已经存在ECharts实例
          if (echarts.getInstanceByDom(myChartDom)) {
            // 如果存在，销毁它
            echarts.getInstanceByDom(myChartDom).dispose();
          }
          return;
        }
        let order = { date: [], data: [] };
        order.date = response.map((item) => item.dataDateUnit);

        response.forEach((item) => {
          order.data.push(item.keywordProperty);
        });

        const xData = order.date;

        // const keyArray = Object.keys(order.data[0]);
        const keyArray = this.supplierData;

        console.log(JSON.stringify(keyArray));
        const series = [];
        keyArray.forEach((key) => {
          // if (key.includes("完成率")) {
          //   series.push({
          //     name: key,
          //     data: order.data.map((item) => item[key]),
          //     type: "line",
          //     smooth: true,
          //     showAllSymbol: true,
          //     symbol: "emptyCircle",
          //     symbolSize: 8,
          //     yAxisIndex: 1,
          //     // itemStyle: {
          //     //   normal: {
          //     //     color: "#F02FC2",
          //     //   },
          //     // },
          //     tooltip: {
          //       valueFormatter: function (value) {
          //         return value + " %";
          //       },
          //     },
          //   });
          // } else {
          if (type == "bar") {
            series.push({
              name: key,
              data: order.data.map((item) => item[key]),
              type: "bar",
              barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                },
              },
            });
          } else {
            series.push({
              connectNulls: true,
              name: key,
              data: order.data.map((item) => (item[key] ? item[key] : null)),
              type: "line",
              // barWidth: 20,
              tooltip: {
                valueFormatter: function (value) {
                  return value;
                },
              },
            });
          }

          // }
        });

        const option = {
          grid: {
            left: "5%",
            top: "10%",
            right: "5%",
            bottom: "10%",
          },
          // 提示框
          // tooltip: { trigger: "axis" },
          tooltip: {
            trigger: "axis",
            // valueFormatter: function (value) {
            //   return value + " %";
            // },
          },
          xAxis: {
            data: xData,
          },
          yAxis: [
            {
              splitLine: { show: false },
              // axisLine: {
              //   lineStyle: {
              //     color: "#B4B4B4",
              //   },
              // },

              axisLabel: {
                formatter: "{value} ",
              },
            },
          ],
          legend: {
            // data: keyArray,
          },
          series,
        };

        //   myChart.setOption(option);
        var myChartDom = this.$refs.echartDataShop;

        // 检查是否已经存在ECharts实例
        if (echarts.getInstanceByDom(myChartDom)) {
          // 如果存在，销毁它
          echarts.getInstanceByDom(myChartDom).dispose();
        }

        // 初始化新的ECharts实例
        var myChart = echarts.init(myChartDom);
        // if (response.length == 0) {
        //   return;
        // } else {
        myChart.setOption(option);
        return;
        var row = [];
        response.forEach((item) => {
          row.push({
            支付日期: item.dataDate,
            单价: item.purchasePrice,
            数量: item.purchaseTotalCount,
            供应商: item.supplier,
          });
        });
        console.log(JSON.stringify(row));

        this.echartDataI.rows = row;
      });
    },
    //总览
    getselectPurchasePriceData(obj) {
      selectPurchasePriceData(obj).then((response) => {
        console.log(JSON.stringify(response));
        this.itemData = response ? response : {};
        if (this.itemType == "item") {
          this.itemData.spu = obj.item;
        } else if (this.itemType == "skc") {
          this.itemData.skc = obj.skc;
        }
        this.itemData.supplier = this.supplierData;
        this.itemData.spu = this.spuData.spu;
        this.itemData.purchasePrice = this.spuData.purchasePrice;
        this.itemData.colorProperty = obj.colorProperty;
      });
    },

    // 表单重置
    reset() {
      this.form = {
        id: null,
        itemId: null,
        rackId: null,
        quantity: null,
        remark: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      // this.pageReq.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.brand = "";
      this.queryParams.supplier = "";
      this.queryParams.colorProperty = "";
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    handlePurchaseExport() {
      this.download(
        "purchase/PurchaseBasicsDwd/voExport",
        {
          ...this.queryParamsPurchase,
        },
        `PurchaseBasicsDwd_${new Date().getTime()}.xlsx`
      );
    },
    /** 导出按钮操作 */
    handleExport() {
      delete this.queryParams.pageSize;
      delete this.queryParams.pageNum;
      this.download(
        "purchase/PurchaseBasicsDwd/exportPurchaseCost",
        {
          ...this.queryParams,
        },
        `exportPurchaseCost"${new Date().getTime()}.xlsx`
      );
    },
  },
};
</script>
<style lang="scss" scoped>
.el-dialog-div {
  height: 80vh;
  overflow-x: hidden;
}

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: white;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  width: 500px;
  resize: none;
  cursor: pointer;
}

span.textname {
  display: -webkit-box;

  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  white-space: pre-wrap;
}
</style>
/**下单月份*/
@Excel(name = "下单月份")
private String monthly;

/** 品牌 */
@Excel(name = "品牌")
private String brand;

/** 供应商 */
@Excel(name = "供应商")
private String supplier;

/** 下单合同数 */
@Excel(name = "下单合同数")
private Integer orderContractQuantity;


/** 下单skc种类数 */
@Excel(name = "下单skc种类数")
private Integer orderSkcQuantity;

/** 下单产品总数 */
@Excel(name = "下单产品总数")
private Integer orderProQuantity;

/** 待入库产品数 */
@Excel(name = "待入库产品数")
private Integer waitProQuantity;

/** 下单金额占比(占月度总额) */
@Excel(name = "下单金额占比(占月度总额)")
private Double orderAmountMonthRatio;

/** 下单数量占比(占月度总额) */
@Excel(name = "下单数量占比(占月度总额)")
private Double orderQuantityMonthRatio;

/** 下单金额占比(占年度总额) */
@Excel(name = "下单金额占比(占年度总额)")
private Double orderAmountYearRatio;

/** 下单数量占比(占年度总额) */
@Excel(name = "下单数量占比(占年度总额)")
private Double orderQuantityYearRatio;

/** 产品类型 */
private String contractType;



/** 合同采购金额（¥） */
@Excel(name = "合同金额", readConverterExp = "¥=")
private Double contractAmount;


/** 已入库数量 */
@Excel(name = "已入库数量")
private Integer quantityReceived;

/** 协议日期内已交货数量 */
@Excel(name = "协议日期内已交货数量")
private Integer overdueQuantity30Days;

/** 超入数量 */
@Excel(name = "超入数量")
private Integer overOrderQuantity;


/** 历史最高单价 */
@Excel(name = "历史最高单价")
private String maxPurchasePrice;

/** 历史最低单价 */
@Excel(name = "历史最低单价")
private String minPurchasePrice;

/** 近6个月最高单价 */
@Excel(name = "近6个月最高单价")
private String sixMonthPriceMax;

/** 平均采购单价 */
@Excel(name = "平均采购单价")
private String avgPurchasePrice;